.form {
  float: left;
  min-height: 300px;
  padding: 0 20px;
}
.row {
  clear: both;
  margin: 5px 0;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.result {
  float: left;
  margin-left: 20px;
}
.question-wrap {
  padding: 20px;
}
.question-wrap:hover {
  background-color: #f5f5f5;
}
.label {
  display: block;
  margin: 5px;
}
.html-preview {
  width: 500px;
  max-height: 90vh;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 20px;
  border: solid 1px #ccc;
}
.json-preview {
  width: 500px;
  height: 170px;
  border: solid 1px #ccc;
  overflow: scroll;
}
.log-preview {
  width: 500px;
  height: 200px;
  border: solid 1px #ccc;
  overflow: scroll;
  font-size: 12px;
}
.log-item {
  padding: 5px;
  border-bottom: solid 1px #ccc;
}
.log-item:hover {
  background-color: #f5f5f5;
}
.log-item-type-warning {
  color: #e6a23c;
}
.log-item-type-error {
  color: #ff0000;
}
.footer {
  clear: both;
  padding: 20px;
}
